<template>
  <view class="su-filter-bar" :style="{padding:padding,top:stickyTop}">
    <view class="su-filter-bar__main">
      <slot></slot>
    </view>
    <view class="su-filter-bar__asider">
      <slot name="asider"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "su-filter-bar",
    props: {
      padding: {
        type: String,
        default: '0 0 0 0'
      },
      stickyTop:{
        type: String,
        default: 'var(--window-top)'
      }
    }
  }
</script>

<style lang="scss">
  .su-filter-bar {
    background-color: #fff;
    display: flex;
    font-size: 28upx;
    position: sticky;
    top: var(--window-top);
    z-index: 5;

    &__asider {
      display: flex;
      align-items: center;
      background-color: #fff;
    }

    &__main {
      flex: 1;
      padding-right: 20upx;
      width: 0;
    }

    /deep/.u-tabs__wrapper__nav__item__text {
      font-size: 28upx;
    }
  }
</style>
